<template>
  <div class="customer">
    <el-avatar :size="58" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
    <div class="name">王一月</div>
    <div class="description">
      <span>15057582610</span><el-divider direction="vertical" /><span>wangyiyue@163.com</span>
    </div>
    <div>
      <!-- <el-tag class="tag" type="primary">Tag 1</el-tag>
      <el-tag class="tag" type="success">Tag 2</el-tag>
      <el-tag class="tag" type="info">Tag 3</el-tag>
      <el-tag class="tag" type="warning">Tag 4</el-tag>
      <el-tag class="tag" type="danger">Tag 5</el-tag> -->
      <el-tag
      v-for="tag in dynamicTags"
      :key="tag"
      closable
      :disable-transitions="false"
      @close="beforeRemove(tag)"
    >
      {{ tag }}
    </el-tag>
    <el-button class="button-new-tag" size="small" @click="show">
      + 新增标签
    </el-button>
    </div>
  </div>
  <crmcustomerAddTag ref="crmcustomeraddtagRef"  />
</template>

<script lang="ts" setup>
import baseService from '@/service/baseService';
import { ElMessage, ElMessageBox } from 'element-plus';
import { onMounted, ref } from 'vue';
import crmcustomerAddTag from '@/views/im/components/customer-add-tag.vue';
const crmcustomeraddtagRef=ref()
onMounted(()=>{
  getUserData()
})
const dynamicTags=ref([])
const getUserData =()=>{
  baseService.get(`/crm/crmcustomer/1767073182801633281`).then((res)=>{
    console.log(res.data);
    
  })

}
const beforeRemove = (id:string) => {
   ElMessageBox.confirm("确定删除吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  })
    .then(() => {
      ElMessage.success("删除成功");
      return true;
    })
    .catch(() => {
      return false;
    });
};
const show=()=>{
  crmcustomeraddtagRef.value.init('1767073182801633281')
}
</script>

<style lang="scss">
.customer {
  text-align: center;
  width: 100%;
  .name {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 23.17px;
    color: rgba(10, 22, 41, 1);
    text-align: center;
    vertical-align: top;
  }
  .description {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 20.27px;
    color: rgba(10, 22, 41, 1);
    text-align: center;
    vertical-align: top;
  }
  .tag {
    margin: 5px;
  }
}
</style>